import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';

import { Layout, Menu, Breadcrumb, Icon, Spin, Row, Col, Button } from 'antd';

import appActions from './action';
import './styles.less';
import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'

const { Header, Content, Footer, Sider } = Layout;


export class App extends Component {
  state = {
    collapsed: false
  };

  static propTypes = {
    children: PropTypes.node,
    app: PropTypes.object
  };

  componentDidMount(){
    const { router } = this.props;
    // console.log(this.props.location.pathname);
  }

  /**
   * menu click handle
   * @param item
   * @param key
   * @param keyPath
   */
  menuHandleClick(pathname, item) {
    if (item && item.key) {
      if (pathname !== item.key) {
        this.props.router.push({
          pathname : item.key
        })
      }
    }
  }

  render() {

    const loading = this.props.app.get('loading');
    const { userinfo } = window.__initData__;
    let pathname = this.props.location.pathname.split('/')[1] || '';
    if(pathname == 'post-edit'){pathname = 'post'}

    const {routes} = this.props;

    return (
      <Layout style={{height:'100%',flexWrap:'nowrap'}}>
        <Sider
          collapsible
          collapsed={this.state.collapsed}
          onCollapse={this.onCollapse}
        >
          <div className="logo" onClick={()=>{
              this.props.router.push({
                pathname: '/'
              });
            }}></div>
          <Menu
            theme="dark"
            mode="inline"
            selectedKeys={[pathname]}
            onClick={this.menuHandleClick.bind(this,pathname)} >
            <Menu.Item key="post">
              <Icon type="file-text" />
              <span className="nav-text">文章列表</span>
            </Menu.Item>
            <Menu.Item key="post-new">
              <Icon type="file-text" />
              <span className="nav-text">添加文章</span>
            </Menu.Item>
            <Menu.Item key="term">
              <Icon type="file-text" />
              <span className="nav-text">分类管理</span>
            </Menu.Item>
            <Menu.Item key="user">
              <Icon type="user" />
              <span className="nav-text">用户管理</span>
            </Menu.Item>
          </Menu>
        </Sider>
        <div style={{width:'100%',overflowY:'scroll'}}>
          <Header style={{ background: '#fff', padding: 0 }} >
            <Row>
              <Col span={6} offset={18}>
                <span className="ant-layout-welcome">Hi : {userinfo.user_nickname}</span>
                <Button type="ghost" shape="circle" icon="logout" onClick={()=>{ window.location.href = 'logout'; }} />
              </Col>
            </Row>
          </Header>

          <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '12px 0' }} routes={routes} />
            <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
              {this.props.children}
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>
            Ant Design ©2016 Created by Ant UED
          </Footer>
        </div>

        {
          loading && <div className="ant-layout-loading">
            <div className="ant-layout-loading-wrap">
              <Spin size="large" />
            </div>
          </div>
        }

      </Layout>
    );
  }
}

export default connect((state)=>{
  return  {
    app: state.get('app')
  }
},dispatch => {
  return {
    appActions : bindActionCreators(appActions, dispatch)
  }
})(App);